<script setup>
import { useRoute } from 'vue-router'
import { logistics } from '@/api/modules/logistics.js'
import { ref, onMounted } from 'vue'
import {useI18n} from "vue-i18n";

const { t } = useI18n()
const route = useRoute()

const getImg = (imgName) => {
  return new URL(`../assets/img/packageQuery/${imgName}`, import.meta.url).href
}

const packageId = ref(route.query.packageId)
const commonList = computed(() => {
  return [
    {
      img: getImg('commonLogistics1.jpg'),
      title: t('content.package.EMS'),
      url: 'https://www.ems.com.cn/'
    },
    {
      img: getImg('commonLogistics2.jpg'),
      title: t('content.package.USPS'),
      url: 'https://www.usps.com/'
    },
    {
      img: getImg('commonLogistics3.jpg'),
      title: t('content.package.Australia'),
      url: 'https://auspost.com.au/'
    },
    {
      img: getImg('commonLogistics4.jpg'),
      title: t('content.package.Canada'),
      url: 'https://www.canadapost-postescanada.ca/cpc/en/home.page#'
    },
    {
      img: getImg('commonLogistics5.jpg'),
      title: t('content.package.Britain'),
      url: 'https://www.royalmail.com/'
    },
    {
      img: getImg('commonLogistics6.jpg'),
      title: t('content.package.Malaysia'),
      url: 'https://www.pos.com.my/'
    },
    {
      img: getImg('commonLogistics7.jpg'),
      title: t('content.package.NewZealand'),
      url: 'https://www.nzpost.co.nz/'
    },
    {
      img: getImg('commonLogistics8.jpg'),
      title: t('content.package.Singapore'),
      url: 'https://www.singpost.com/'
    },
    {
      img: getImg('commonLogistics9.jpg'),
      title: t('content.package.France'),
      url: 'https://www.laposte.fr/particulier'
    },
    {
      img: getImg('commonLogistics10.jpg'),
      title: t('content.package.DHL'),
      url: 'https://www.dhl.com/cn-en/home.html'
    }
  ]
})
// 物流查询
// 监听是否进页面就有参数，是的话帮忙发请求
 const firstFlag = ref(false)
  onMounted( ()=>{
  if(packageId.value )
  logisticsFn()
 })

const logisticsData = ref({})
const logisticsFn = () => {
  if(!packageId.value) {
    return ElMessage({
      type: 'error',
      message: t('content.package.remind1'),
      center: true,

    })
  }
  if(!(/^[A-Za-z0-9]+$/.test(packageId.value))) return ElMessage({
      type: 'error',
      message: t('content.package.remind2'),
      center: true,

    })
  if(!firstFlag.value) firstFlag.value = true
  logistics({ isOfficialWebsite: true, transferOrderNumber: packageId.value }).then((res) => {
    logisticsData.value = res.data[0]
    ElMessage.success(res.data[0] ? t('content.package.remind3') : t('content.package.remind4'))
  })
}
</script>

<template>
  <div class="h-[250px] bg-[url(@/assets/img/packageQuery/trackBg.jpg)] bg-cover bg-no-repeat bg-[#f8f8f9] relative">
    <div class="absolute top-[230px] left-1/2 -translate-x-1/2">
      <div class="bg-white shadow-xl py-[60px] px-[120px] lg:w-[1024px]">
        <div class="flex border border-[#E70012]">
          <input type="text" v-model="packageId" @keyup.enter="logisticsFn" :placeholder="$t('common.pleaseInput') + $t('content.package.orderId')" class="w-[140px] h-[60px] px-[20px] lg:flex-1 !border-none mr-2 focus:outline-0" />
          <div class="w-[90px] lg:w-[140px] h-[60px] bg-[#E70012] text-center leading-[60px] text-white cursor-pointer" @click="logisticsFn">
            {{ $t('common.find')}}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-[200px] flex justify-center pb-[30px] px-[15px]">
    <div v-if="firstFlag" class="w-full lg:w-[1024px] bg-[#fbfbfb] border border-[#dfdfdf] px-[20px] py-[10px] text-center">
      <el-timeline style="max-width: 600px" v-if="logisticsData && logisticsData.transitOrderNo">
        <el-timeline-item placement="top" type="primary" color="#9bcaef" size="large" :timestamp="logisticsData.createTime">
          <el-card>
            <h4>{{ logisticsData.orderCreateDescribe }}</h4>
            <p>{{ logisticsData.createTime }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item placement="top" type="primary" color="#9bcaef" size="large" :timestamp="logisticsData.recheckTime">
          <el-card>
            <h4>{{ logisticsData.remarks }}</h4>
            <p>{{ logisticsData.recheckTime }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item placement="top" type="primary" color="#9bcaef" size="large" :timestamp="logisticsData.pickingTime">
          <el-card>
            <h4>{{ logisticsData.pickRemarks }}</h4>
            <p>{{ logisticsData.pickingTime }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item placement="top" type="primary" color="#9bcaef" size="large" :timestamp="logisticsData.pickingTime">
          <el-card>
            <h4>{{ logisticsData.pickRemarks }}</h4>
            <p>{{ logisticsData.pickingTime }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <h4 v-else class="text-[#e70012] border-b border-dashed border-[#ddd] py-[10px] text-lg">
        {{$t('content.package.sorryNoData')}}
      </h4>
    </div>
  </div>
  <div class="flex justify-center bg-[#f6f4f7] px-[15px]">
    <div class="w-[1024px]">
      <div class="h-[80px] text-lg leading-[80px]">{{ $t('content.package.usually')}}</div>
      <div class="grid grid-cols-3 lg:grid-cols-5 gap-3 lg:gap-10 mb-[50px]">
        <a v-for="(item, index) in commonList" :key="index" :href="item.url" target="_blank" class="flex flex-col bg-white border border-[#d8d8d8] cursor-pointer hover:border-[#1268BB] common">
          <img :src="item.img" alt="" class="w-full" />
          <p class="h-[40px] leading-[40px] text-center">{{ item.title }}</p>
        </a>
      </div>
    </div>
  </div>
</template>

<style scoped>
.common:hover p {
  background: #1268bb;
  color: white;
}
</style>
